
// 主入口文件
import Vue from 'vue';
import App from './App.vue';

// 该方法可以在任意一个组件中访问到,全局方法
Vue.prototype.addZero = (num) => {
  return num < 10 ? '0' + num : num
}

// 引入router路由实例对象
import router from '@/router'

// 全局注册全局组件
// 语法: Vue.component('全局注册的组件名',组件模板)
// 全局组件和局部组件比较缺点:
// 当页面中注册全局组件, 但是没有使用, 最后打包执行npm run build 也会打包到生产包中
// 全局组件和局部组件比较优点:
// 使用时不需要引入注册了.

import Globalchild from '@/components/Globalchild';
Vue.component('globalchild', Globalchild)

// 定义全局过滤器
Vue.filter('formatMoney', (val) => {
  return `${val.toFixed(2)}元`
})
const vm = new Vue({
  router, //挂载路由实例
  render: h => h(App),
}).$mount('#app')


// vue2和vue3 语法区别
// 01: 在vue2中 template 模板中必须有根节点, vue3不要求
// 02: 在vue2中 自定义指令的生命周期钩子函数和vue3中有区别
// 03: 生命周期的区别
// vue2中有beforeCreate和 created, 没有setup , 
// vue3中选项式语法中有, 组合式没有, 有setup 生命周期
// setup 的生命周期的执行时间是在 beforeCreate之前, 所以setup 没有this
// vue2中的beforeDestory => vue3 beforeunmount
// vue2中的destoryed => vue3 unmounted  
// 04: 路由的区别
// vue2+router@3  => vue3+router@4 
// router@3 创建router实例方式是 new VueRouter() 参数支持name+params
// router@4 创建router实例方式是 createRouter() 参数不支持 name+params

// 05:数据实现响应式原理方式
//  vue2使用 object.defineProperty 方式 结合发布订阅者模式 实现数据的劫持监听
//  vue3适应proxy 实现 数据的劫持和监听

// 06: vue2中有过滤器, vue3 中没有过滤器,使用methods 代替

// 07: 重中之重:
//vue2:
// 操作data数据中的对象属性(增删改) vue2监听不到数据的变化
// 通过下标操作数组也监听不到
// vue2中的解决方法: 
// Vue.set(obj,key,value) 或 this.$set(obj,key,value)
// Vue.delete(obj,key,) 或   this.$delete(obj,key);
// 通过下标操作数组也监听不到
// Vue.set(arr, index, value) 或 this.$set(arr, index, value)
// arr.splice(起始下标, 删除的个数, 新增的元素);

// vue3 没问题

// Vue2中prototype;

// function Animal(name, age) {
//   this.name = name;
//   this.age = age
// }
// Animal.prototype.say = () => {
//   console.log('我是动物')
// }
// const animal = new Animal('动物', 10)
// // console.log(animal)

// function Cat() {
//   this.sex = '雄性'
// }
// Cat.prototype = animal
// const cat = new Cat()
// console.log('cat', cat);
// cat.say()


// 项目中的权限问题?
// 后台管理系统中常问的问题

// 一般首先超级管理员 通过提交表单的形式注册角色, 
// 经理  [菜单项1,....]
// 主管   [菜单项2,....]
// 组长     [菜单项3,....]
// 普通员工  [菜单项4,....]

// 添加员工
// 提交表单形式 注册员工, 并为员工选择部门和角色 

// 员工登录
// 后端返回该员工的 账户信息, [姓名,role , token] 存到vuex

// 在员工登录成功后, 跳转到首页前, 写全局前置守卫
// router.beforeEach()
// 在该前置守卫 从vuex 中获取 role, 请求接口, 传role,例如role=2,
// 后端返回该角色可以访问的所有菜单,将这些菜单项存到vuex 中,并且将这些路由菜单项
// 通过addRoute或addRoutes 这两个方法中的一个动态添加路由,
// 语法: router.addRoute(得到的菜单项)

// 跳转到首页在左侧菜单栏遍历vuex 存的该角色返回的菜单项















